<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>时间轴</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div class="container">

    <div class="timeline-item" *ngFor="let item of items " (click)="showinfo(item)" [attr.date-is]='item.date'>
      <h1>{{item.title}}</h1>
      <p>
        {{item.content}}
      </p>
    </div>

    <div class="timeline-item" date-is='20-07-1990'>
      <h1>Oeehhh, that's awesome.. Me too!</h1>
      <p>
        I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write
        the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is
        politics, are they really so different? I think the only card she has is the Lorem card.
      </p>
    </div>

    <div class="timeline-item" date-is='20-07-1990'>
      <h1>I'm ::last-child so my border fades ^__^</h1>
      <p>
        I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write
        the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is
        politics, are they really so different? I think the only card she has is the Lorem card.
      </p>
    </div>

  </div>

</ion-content>